<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">  
    <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>  
    <script >hljs.initHighlightingOnLoad();</script>  
    <title>js设计模式</title>
    <style>
        *{
            margin:0;
            color:#333;
        }
        div,p{
            font-size:14px;
        }
        h1,h2,h3,h4,h5{
            padding:10px 5px;
        }
        section{
            padding:10px;
            background:#f4f4f4;
            border-radius:5px;
            margin-bottom:20px;
        }
        p{
            font-size:14px;
            line-height:1.5;
        }
        code{
            font-family: Arial, Helvetica, sans-serif;
            font-size:13px;
            line-height:19px;
        }
    </style>
</head>
<body>
<h1>js设计模式</h1>
<section>
    <h2>1、桥接模式</h2>
    <p>将抽象与其实现隔离开来，一般适用于事件驱动,监听器回调函数</p>
    <pre>
        <code class="lang-javascript">
            function getResultById(id,callback){
               asyncRequst('GET',url){
                 callback()
               }
            }
            addEvent(element,'click',getResultBridge)
            function getResultBridge(e){
                getResultById(id,function(){
                    //
                })
            }
        </code>
    </pre>
    <p>用于连接公用api和私有代码</p>
    <pre>
        <code class="lang-javascript">
            /**
            *  访问私有属性
            */
            var Public=function(){
                var secret='123';
                this.getSecret=function(){
                    return secret
                }
            }
            var p =new Public();
            p.getSecret()   //123
        </code>
    </pre>
    <pre>
        <code class="lang-javascript">
            /**
            *  连接多个类
            */
            function Aclass(a){
                this.a = a
            }
            function Bclass(b){
                this.b = b
            }
            function Cclass{
                this.a =new Aclass('a');
                this.b =new Bclass('b');
            }
            console.log(new Cclass('a','b'))
        </code>
    </pre>
    <h2>2、组合模式</h2>
    <p>用一条命令在多个对象上计发复杂的或递归的行为,适用于对大批对象操作</p>
    <div>优点：
        <ul>
            <li>1:用同样的方法处理对象的集合与其中特定子对象</li>
            <li>2:把一批子对象组织成树形结构，并可遍历</li>
        </ul>
        组合对象:叶对象（不包含其他页对象）和组合对象（叶对象+组合对象）
    </div>
    <section></section>
</section>
<script>

</script>   
</body>
</html>